<template>
	<view class="user-home-app">
		<image src="../../../static/bgc.png" mode="" style="width: 350rpx;height: 400rpx;position: fixed;right :20rpx;top: 20rpx;"></image>
		<view class="user-info" @click="goAuthPage()">
			<view class="user-avatar">
				<image src="/static/logo.png" class="img"></image>
			</view>
			<view class="info">
				<view class="to-login" v-if="!isLogin" style="margin-top: 20upx; font-size: 32upx">登录/注册</view>
				<view class="nickname" v-if="isLogin" style="font-size: 40upx">{{ user.name }}</view>
				<view class="userid" v-if="isLogin" style="font-size: 28upx">ID: {{ user.userId }}</view>
			</view>
		</view>
		<view class="money-stat">
			<view class="money-item">
				<view class="value">{{ user.money }}</view>
				<view class="text">余额</view>
			</view>
			<view class="money-item" @click="goPage('/pages/tea/voucher/index?tabIndex=3')">
				<view class="value">{{couponList.length}}</view>
				<view class="text">优惠券</view>
			</view>
			<view class="money-item">
				<view class="value">{{ user.grade }}</view>
				<view class="text">积分</view>
			</view>
			<!--
			<view class="money-item">
				
				<view class="value">{{user.depositMoney}}</view>
				<view class="text">押金</view>
			</view>
			<view class="money-item">
				
				<view class="value">{{user.vipMoney}}</view>
				<view class="text">会员费</view>
			</view>
			-->
		</view>
		<view class="user-action-list">
			<view class="title">常用功能</view>
			<view class="user-action-list-box">
				<view class="action-item" @click="goPage('/pages/tea/v2/index')">
					<image class="img" src="/static/4441.png"></image>
					<text class="text">立即预约</text>
				</view>
				<view class="action-item" @click="goPage('/pages/user/order/list')">
					<image class="img" src="/static/4442.png"></image>
					<text class="text">消费清单</text>
				</view>
				<view class="action-item" @click="goPage('/pages/tea/voucher/index?tabIndex=1')">
					<image class="img" src="/static/5555.png"></image>
					<text class="text">会员充值</text>
				</view>
				<view class="action-item" @click="wifiModal.show = true">
					<image class="img" src="/static/4443.png"></image>
					<text class="text">WiFi连接</text>
				</view>

				<button class="contactBtn" plain="true" open-type="contact">
					<view class="action-item">
						<image class="img" src="/static/4445.png"></image>
						<text class="text">客服</text>
					</view>
				</button>
			</view>

			<!-- <view class="action-item" @click="goPage('/pages/user/auth/invite')">
				<image class="img" src="/static/user.png"></image>
				<text class="text">邀请新用户</text>
				<image class="list-right" src="/static/list-right.png"></image>
			</view>
			<view class="action-item" @click="goPage('/pages/user/info/sub')">
				<image class="img" src="/static/user_group.png"></image>
				<text class="text">邀请成功会员</text>
				<image class="list-right" src="/static/list-right.png"></image>
			</view> 
			<view class="action-item" @click="goPage('/pages/user/info/vipRule')">
				<image class="img" src="/static/vip-icon.png"></image>
				<text class="text">会员享受权限</text>
				<image class="list-right" src="/static/list-right.png"></image>
			</view> -->
		</view>
		<modal
			:show="wifiModal.show"
			@close="wifiModal.show = false"
			@cancel="wifiModal.show = false"
			:show-footer="false"
			:show-confirm="false"
			:show-cancel="false"
			confirm-text="确定"
			cancel-text="关闭"
		>
			<view style="border-bottom: 1px solid lightgrey">
				<div class="open-control-item" style="margin-top: 45rpx">
					<view
						style="
							text-align: center;
							font-weight: bold;
							padding: 10px;
							font-size: 20rpx;
							display: inline-flex;
						"
					>
						WiFi账号：15555555555
					</view>
					<view
						style="
							text-align: center;
							font-weight: bold;
							padding: 10px;
							font-size: 20rpx;
							display: inline-flex;
						"
					>
						WiFi密码：66666666
					</view>
					<view class="btn-sm btn-primary" @click="copyWifiPassword()">复制密码</view>
					<!-- <Button class="open-control open-control-room" @click="connectWifi()">一键连接</Button> -->
				</div>
			</view>
		</modal>
		<!--
		<view class="logout" style="margin:0 50upx;" v-if="isLogin">
			<view class="btn btn-error" style="padding:15upx 0;" @click="logout">退出登录</view>
		</view>
		-->
		<customTarbar :selected="3"></customTarbar>
	</view>
</template>

<script>
import util from '@/libs/util.js';
import Modal from '@/components/neil-modal/neil-modal.vue';
import MyTarbar from '@/components/my-tarbar.vue';
import customTarbar from '@/components/tarbar/custom-tarbar.vue';

export default {
	data() {
		return {
			appHeight: '',
			isLogin: false,
			loading: true,
			wifiModal: {
				show: false,
				wifiAccount: '',
				wifiPassword: '88888888'
			},
			user: {
				userId: '',
				nickname: '',
				avatar: '/static/my_home.png',
				money: 0,
				depositMoney: 0,
				vipMoney: 0
			},
			couponList:[]
		};
	},
	onLoad(e) {
		this.isLogin = false;
	},
	onShow() {
		if (global.isLogin()) {
			this.getDetail();
			this.isLogin = true;
			this.getCardAndVoucher()
		} else {
			this.user = {
				userId: '',
				nickname: '',
				avatar: '/static/my_home.png',
				money: 0,
				depositMoney: 0,
				vipMoney: 0
			};

			this.isLogin = false;
		}
	},
	components: {
		MyTarbar,
		customTarbar,
		Modal
	},
	methods: {
		...util,
		goAuthPage() {
			console.log('go auth page');
			if (!this.isLogin) {
				this.goPage('/pages/user/auth/auth');
				return false;
			}
		},
		logout() {
			global.setToken(null);
			this.isLogin = false;
			uni.reLaunch({ url: '/pages/tea/v2/map' });
			/*
				uni.switchTab({
				    url: '/pages/tea/v2/map'
				})
				*/
		},
		getCardAndVoucher() {
		  this.$api.post('/user/voucher/getUserVoucher', {}).then((response) => {
		    if (response.ret===1) {
		      this.couponList = response.data;
		    }
		  });
		},
		connectWifi() {},
		copyWifiPassword() {
			uni.setClipboardData({
				data: this.wifiModal.wifiPassword,
				success: function () {
					console.log('复制成功');
					// 可以添加用户友好的提示，例如使用uni.showToast提示复制成功
					uni.showToast({
						title: '复制成功',
						icon: 'success',
						duration: 2000
					});
				},
				fail: function () {
					console.error('复制失败');
					// 可以添加错误处理或用户友好的提示
				}
			});
		},
		getDetail() {
			uni.showLoading({
				title: '加载中'
			});
			this.$api.post('/user/getInfo', {}).then((response) => {
				if (response.ret === 1) {
					this.user = response.data;
					this.user.money = this.handlePrice(this.user.money / 100);
					this.user.depositMoney = this.handlePrice(this.user.depositMoney / 100);
					this.user.vipMoney = this.handlePrice(this.user.vipMoney / 100);

					uni.setStorageSync('userInfo_userId', this.user.userId);

					this.loading = false;
					uni.hideLoading();
				} else {
					this.$Message.info(response.msg);
				}
			});
		},
		goPage(url) {
			if (!this.isUserLogin()) {
				uni.navigateTo({ url: '/pages/user/auth/auth' });
			} else {
				uni.navigateTo({ url: url });
			}
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: $uni-theme-color;
}
.btn-primary{
	font-size:40upx;
	margin:0 auto;
	// background-color:#1D2C6D;
	background-color:$uni-theme-color;
	color:white;
	height:80rpx;
	line-height: 80rpx;
	text-align: center;
	border-radius: 10upx;
	font-size: 32rpx;
	font-weight: 700;
}
button {
	margin: 0;
	padding: 0;
	outline: none;
	border-radius: 0;
	background-color: transparent;
	line-height: inherit;
	border: none !important;
}

.open-control-item {
		margin: 0rpx 0rpx 20rpx 90rpx;
		width: 350rpx;
		text-align: center;
		padding-bottom: 10upx;
	}
.user-home-app {
	font-size: $uni-font-size-base;
	height: 100%;
	display: flex;
	flex-direction: column;
	padding-bottom: 0upx;
	padding: 0rpx 30rpx;
	.money-stat {
		display: flex;
		align-items: center;
		justify-content: space-around;
		.money-item {
			text-align: center;
			.value {
				color: #fff;
				font-size: 36upx;
			}
			.text {
				font-size: 24upx;
				margin-top: 5upx;
				color: #fff;
				opacity: 0.8;
			}
		}
	}

	.user-action-list {
		border: 3upx solid #eee;
		margin: 30upx 0;
		font-size: $uni-font-size-lg;
		background-color: $uni-bg-color;
		border-radius: 20rpx;
		padding: 20rpx;
		.title {
			font-size: 28rpx;
			font-weight: 700;
		}
		.user-action-list-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			.action-item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				padding: 20rpx;
				.img {
					width: 52upx;
					height: 52upx;
				}
				.text {
					margin-top: 20rpx;
					font-size: 22rpx;
					color: #666;
				}
			}
		}
	}

	.user-info {
		height: 250upx;
		background-color: $uni-theme-color;
		display: flex;
		align-items: center;
		.user-avatar {
			// background: #82c4fe;
			width: 120upx;
			height: 120upx;
			overflow: hidden;
			border-radius: 70%;
			margin-right: 30rpx;
			.img {
				width: 120upx;
				height: 120upx;
			}
		}
		.info {
			flex: 1;
			color: white;
			.nickname {
				font-size: 32upx;
			}
			.userid {
				font-size: 24upx;
			}
		}
		.avatar {
			width: 180upx;
			height: 180upx;
			background-color: white;
			margin: 0 auto;
			margin-top: 30upx;
			border-radius: 70%;
			overflow: hidden;
		}

		.default-avatar {
			width: 180upx;
			height: 180upx;
		}
	}
}
</style>
